<template>
    <div class="mine">
        <h1>{{title}}</h1>
        <button @click="handle">点击</button>
    </div>
</template>

<script>
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,ref} from 'vue'
export default {
    // 1 vue3中composition-api中，setup是其中一个组件生命周期，
    //1 setup代替的是原先的beforeCreate和Created 
    setup() {
            //3定义响应式数据
        var title = ref('zh')
            //4 定义方法
        var handle = () => {
                title.value = 'nsbsbawlzh'
            } 

            //1 生命周期 
            onBeforeMount(() => {
                    console.log('组件挂载前');
            }),
            onMounted(() => {
                console.log('组件挂载完成');
            }),
                onBeforeUpdate(() => {
                        console.log('组件更新前');
                }),
                onUpdated(() => {
                        console.log('组件更新完成');
                }),
                onBeforeUnmount(() => {
                        console.log('组件卸载前');
                }),
                onUnmounted(() => {
                        console.log('组件卸载完成');
            })
        return {
            title,
            handle
        }
    }
}
</script>

<style>

</style>